<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息提交</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="./css/public.css">
    <style>
        body {
            background: #F6F6F6;
        }

        .title {
            font-size: 0.4rem;
            font-weight: bold;
            color: rgba(18, 25, 34, 1);
            padding-top: 0.346rem;
            text-align: center;
            background: #fff;
        }

        .infoBox {
            width: 100%;
            box-sizing: border-box;
            padding: 0.533rem 0.4rem;
            background: #fff;
        }

        .infoInput {
            width: 100%;
            box-sizing: border-box;
            padding: 0.533rem 0;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(194, 194, 194, 1);
        }

        .address {
            width: 100%;
            box-sizing: border-box;
            /* padding: 0.533rem 0; */
        }

        .infoInput_title {
            align-items: center;
        }

        .infoInput_title {
            width: 2rem;
            font-size: 0.4rem;
            font-weight: bold;
            color: rgba(116, 116, 116, 1);
        }

        .infoInput_input {
            margin-left: 0.533rem;
            font-size: 0.4rem;
            font-weight: bold;
            color: rgba(116, 116, 116, 1);
            border: none;
            outline: none;
            background: none;
            flex: 1;
            cursor: pointer;
        }

        .infoInput_right {
            width: 0.267rem;
        }

        .address {
            padding-bottom: 1.2rem;
        }

        .address_li {
            margin-top: 0.666rem;
            align-items: center;
        }

        .infoInput_sel {
            align-items: center;
            margin-left: 0.533rem;
            flex: 1;
            font-size: 12px;
            color: #747474;
        }

        /* .form-inline>div {
            display: flex;
            align-items: center;
        } */
        .form-control {
            font-size: 12px;
            padding: 0 !important;
            transform: scale(0.83);
        }

        .form-group {
            display: inline-block !important;
            width: 2rem;
            margin: 0;
        }

        .address_input {
            width: 1.3rem;
            height: 0.533rem;
        }

        .address_text {
            margin: 0 3px;
        }

        .mode {
            justify-content: space-between;
            align-items: center;
            padding: 0.533rem 0.4rem;
            box-sizing: border-box;
            background: #fff;
            margin-top: 6px;
            font-size: 0.4rem;
            font-weight: bold;
        }

        .mode_img {
            width: 0.266rem;
        }

        .account {
            background: #fff;
            margin-top: 6px;
            font-size: 0.4rem;
            color: #595959;
            width: 100%;
            box-sizing: border-box;
            padding: 0.4rem;
        }

        .account_title {
            margin-bottom: 0.306rem;
        }

        .account_li {
            justify-content: space-between;
            align-items: center;
            padding: 0.346rem 0;
        }
        .account_li:not(:last-of-type) {
            border-bottom:1px solid rgba(194,194,194,1);
        }
        .account_li_sel {
            margin-left: 0.453rem;
        }
        .jtxx {
            width: 0.48rem;
            display: block;
            margin: 0 auto;
            margin-top: 0.5rem;
        }
        .btnBox {
            margin-top: 6px;
            background: #fff;
            padding-top: 0.72rem;
            padding-bottom: 1.36rem;
        }
        .btnBox_btn {
            width:2.293rem;
            height:1.306rem;
            background: #4492FF;
            box-sizing: border-box;
            text-align: center;
            line-height: 1.306rem;
            font-size: 0.4rem;
            margin: 0 auto;
            color: #fff;
            cursor: pointer;
        }
    </style>
    <script src="./js/index.js"></script>

</head>

<body>
    <main>
        <div class="title">卖家信息</div>
        <div class="infoBox">
            <div class="flex infoInput">
                <div class="flex infoInput_left">
                    <div class="infoInput_title">姓名：</div>
                    <input type="text" class="infoInput_input" placeholder="请输入姓名">
                </div>
                <img class="infoInput_right" src="./img/jt.png" alt="">
            </div>
            <div class="flex infoInput">
                <div class="flex infoInput_left">
                    <div class="infoInput_title">电话：</div>
                    <input type="text" class="infoInput_input" placeholder="请输入电话">
                </div>
            </div>
            <div class="address">
                <div class="flex address_li">
                    <div class="infoInput_title">地区:</div>
                    <div class="flex infoInput_sel">
                        <form class="form-inline">
                            <div data-toggle="distpicker">
                                <div class="form-group">
                                    <label class="sr-only" for="province1">Province</label>
                                    <select class="form-control" id="province1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="city1">City</label>
                                    <select class="form-control" id="city1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="district1">District</label>
                                    <select class="form-control" id="district1"></select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="flex address_li">
                    <div class="infoInput_title">详细地址：</div>
                    <div class="flex infoInput_sel">
                        <input type="text" class="address_input">
                        <div class="address_text">小区</div>
                        <input type="text" class="address_input">
                        <div class="address_text">楼层</div>
                        <input type="text" class="address_input">
                        <div class="address_text">门牌号</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex mode">
            <div>收款方式</div>
            <img class="mode_img" src="./img/jt.png" alt="">
        </div>
        <div class="account">
            <div class="account_title">收款账户</div>
            <div class="flex account_li">
                <div>中国建设银行</div>
                <div class="flex account_li_r">
                    <div>6217*****120</div>
                    <div class="account_li_sel">已选</div>
                </div>
            </div>
            <div class="flex account_li">
                <div>中国工商银行</div>
                <div class="flex account_li_r">
                    <div>3217*****320</div>
                    <div class="account_li_sel">已选</div>
                </div>
            </div>
            <img src="./img/jtxx.png" class="jtxx" alt="">
        </div>
        <div class="btnBox">
            <div class="btnBox_btn">提交信息</div>
        </div>
        <div class="flex footer">
            <div class="footer_li footer_active sy">
                <img src="./img/footer_img1.png" alt="">
                <div>首页</div>
            </div>
            <div class="footer_li fl">
                <img src="./img/footer_img2.png" alt="">
                <div>分类</div>
            </div>
            <div class="footer_li fw">
                <img src="./img/footer_img3.png" alt="">
                <div>服务</div>
            </div>
            <div class="footer_li wd">
                <img src="./img/footer_img4.png" alt="">
                <div>我的</div>
            </div>
        </div>
    </main>

    <script src="./js/jquery.js"></script>
    <script src="./js/public.js"></script>
    <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/main.js"></script>
    <script>

    </script>
</body>

</html>